import React from 'react';
import styled from 'styled-components';
//外层标签是什么就是styled.什么
//必须得是模板字符串
const Title = styled.div`
background-color: lightblue;
    color: black;
    &:hover {
        color: rebeccapurple;
    }
`
const List = styled.div`
    background: lavender;
    '&:a' :{ //针对a标签设置样式
        color: red;
            '&:hover': { //针对a标签的鼠标悬浮设置样式
                color: blue;
            }
    }
    .innerBox{
        color:aquamarine;
    }
`
export const LinkStyledComp = ()=>{
    return (
        <>
            <Title>
                链接标题
            </Title>
            <List>
                <a href={'http://localhost:8080/'}>
                    hello world
                </a>
                <div className={'innerBox'}>
                    inner box
                </div>
            </List>
        </>
    )
}